創建 CLI(command-line interface) 環境前,要先下載 node.js
① ⌘ + space 搜尋終端機 terminal.app
② 直接從連結下載 node.js(v14.15.3),或是從終端機檢查是否曾經安裝過。
$ node -v (node version)
③ 通常文件會給指令 ↠ npm install -g @vue/cli (-g 安裝全域的環境),但是 Mac 下載全域的文件要較高的權限,執行 sudo 指令後會出現鑰匙的符號,這時候輸入密碼並不會出現文字,不要覺得困惑,只要正確的輸入登入時的密碼可以了。
$ sudo npm install -g @vue/cli
以上Vue CLI 的環境就算是建好囉,接著就來建立第一個 Vue 專案吧!
① 先確定專案要放置的位置,練習用終端機調整新增檔案的位置,括弧後面的說明比較方便記憶,不用輸入哦!
顯示當前位置 / 改變目錄位置 / 新增資料夾
$ pwd (print working directory)
$ cd (change directory)
$ mkdir [資料夾名稱] (Make Directory)
② 新增 Vue 專案
$ vue create [專案名稱]
③ 接著會顯示環境要預設下載的套件(這部分略~),重點是複選的項目按空白鍵可以選擇/取消,一開始不小心一直按 Enter 鍵就跳過了。
④ 以上新增完專案,這時候只要把位置移到專案裡並啟動環境,就成功囉!
$ cd [專案名稱]
$ npm run serve
參考來源:
https://book.vue.tw/CH3/3-1-vue-cli-introduction.html
https://ithelp.ithome.com.tw/articles/10224406